<template>
  <!-- 操作日志 -->
  <div style="height: 100%">
    <el-container>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="操作日志">
            <el-card>
              <el-form ref="formRef" :model="operateForm" label-width="80px">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="操作用户" prop="createUser">
                      <el-input
                        v-model="operateForm.createUser"
                        placeholder="请输入操作用户"
                        clearable
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-button type="primary" icon="search" @click="getList">搜索</el-button>
                    <el-button icon="refresh" @click="resetForm">重置</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-card style="margin-top: 15px">
              <el-table :data="userList" border>
                <el-table-column
                  label="序号"
                  width="60"
                  type="index"
                  align="center"
                  :index="indexMethod"
                   height="40vh"
                />
                <el-table-column label="操作用户" prop="createUser" align="center" />
                <el-table-column label="操作时间" prop="createTime" align="center" />
                <el-table-column label="操作IP" prop="ip" align="center" />
                <el-table-column label="IP所属地" prop="ipAddr" align="center" />
                <el-table-column label="请求URL" prop="requestUri" align="center" />
                <el-table-column label="请求方式" prop="requestMethod" align="center" />
                <el-table-column label="操作方法" prop="methodName" align="center" />
                <el-table-column label="操作方法说明" prop="operation" width="120" align="center" />
                <el-table-column label="耗时" prop="useTime" align="center" />
                <el-table-column label="更多" width="60" prop="phone" type="expand" align="center">
                  <template #default="scope">
                    <el-card>
                      <p>操作 IP: {{ scope.row.ip }}</p>
                      <p>IP 所属地: {{ scope.row.ipAddr }}</p>
                      <p>请求 ID: {{ scope.row.id }}</p>
                      <p>请求 URl: {{ scope.row.requestUri }}</p>
                      <p>请求类型: {{ scope.row.contentType }}</p>
                      <p>操作参数: {{ scope.row.userAgent }}</p>
                    </el-card>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="totals"
                @update:current-page="handleCurrentPageUpdate"
                @update:page-size="handlePageSizeUpdate"
              ></pagination>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ref,
  reactive,
  onBeforeMount,
  toRefs
} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import { operatelogPage } from '@api/log'
import { IListInfo } from '@interface/log'

const state = reactive({
  operateForm: {
    current: 1,
    size: 10,
    createUser: ''
  },
  userList: [] as IListInfo[],
  totals: 0
})

//控制dialog显示
const dialogVisible = ref<boolean>(false)
const userUpdateId = ref('')
const { operateForm, userList, totals } = toRefs(state)

onBeforeMount(() => {
  getList()
})

const indexMethod = (index: number) => {
  // 拿到页码
  const currentPage = operateForm.value.current
  // 拿到每页记录条数
  const pageSize = operateForm.value.size
  // 根据值进行计算返回
  return index + 1 + (currentPage - 1) * pageSize
}
const getList = async () => {
  const res = await operatelogPage(operateForm.value)
  const { data } = res
  totals.value = data.total
  userList.value = data.records
  console.log(res.data, userList.value)
}

//分页-页码
const handleCurrentPageUpdate = (page: number) => {
  operateForm.value.current = page
  getList()
}
//分页-一页显示多少条
const handlePageSizeUpdate = (page: number) => {
  operateForm.value.size = page
  getList()
}

//新增|编辑
const btnUserDialog = (id: string) => {
  if (typeof id == 'string') {
    userUpdateId.value = id
  } else {
    userUpdateId.value = ''
  }
  dialogVisible.value = true
}

//重置
const resetForm = () => {
  operateForm.value = {
    current: 1,
    size: 10,
    createUser: ''
  }
  getList()
}
</script>
